<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>PRIM</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>PRIM</h1>
    <script type="module">
        // import * as TWO from './two.js'
        import { Scene, Render, Rect, PickContrls, Vector2 } from './two/two.js'
        // import Point from './two.js'
        // import Render from './two.js'
        const width = 400, height = 300, edge = 20
        let cols = ~~((width * 2) / edge) - 1, rows = ~~((height * 2) / edge) - 1

        let render = new Render()
        render.setSize(width, height)
        render.setPixelRatio(2)
        render.setAnimationLoop(animation)
        document.querySelector('body').appendChild(render.domElement)

        const scene = new Scene()
        const rect = new Rect(edge, edge)
        rect.setAttribute('stroke', false)
        // rect.position.copy({ x: 10 + 5, y: 10 + 5 })

        const colorMap = {
            0: 'hsl(220, 20%, 50%)', // 路
            1: 'hsl(120, 100%, 50%)', // 墙
            2: 'hsl(0, 100%, 50%)',  // 待选
        }
        // scene.add(rect)
        // 0-路, 1-墙, 2-待选
        let map = new Array()
        // 待选区
        let openlist = []
        for (let x = 0; x < cols; ++x) {
            map[x] = new Array()
            for (let y = 0; y < rows; ++y) {
                map[x][y] = 1
                const rect = new Rect(edge - 3, edge - 3)
                rect.setAttribute('stroke', false)
                rect.position.copy({ x: (x + 1) * edge, y: (y + 1) * edge })
                scene.add(rect)
            }
        }
        let x_b = ~~(Math.random() * cols), y_b = ~~(Math.random() * rows)
        map[x_b][y_b] = 1
        join_(x_b, y_b)
        console.log(scene)
        /*
        const controls = new PickContrls(scene, render.domElement)
        controls.setPixelRatio(2)
        */
        function animation() {
            render.render(scene)
            // console.log(1)
            if (openlist.length > 0) {
                let index = ~~(Math.random() * openlist.length)
                let selected = openlist[index]
                through(selected)
                map[selected.x][selected.y] = 0
                join(selected)
                openlist.splice(index, 1)
            }
            // console.log(openlist)
            let index = 0
            for (let x = 0; x < cols; ++x) {
                for (let y = 0; y < rows; ++y) {
                    const rect = scene.children[index++]
                    rect.setAttribute('fillStyle', colorMap[map[x][y]])
                }
            }
        }


        function through(pos={x: 0, y: 0}) {
            through_(pos.x, pos.y)
        }

        function through_(x, y) {
            let list = []
            // 上
            if (y - 2 >= 0 && map[x][y - 2] == 0) {
                list.push({x: x, y: y-1})
            }
            // 下
            if (y + 2 <= rows - 1 && map[x][y + 2] == 0) {
                list.push({x: x, y: y+1})
            }
            // 左
            if (x - 2 >= 0 && map[x - 2][y] == 0) {
                list.push({x: x - 1, y: y})
            }
            // 右
            if (x + 2 <= cols - 1 && map[x + 2][y] == 0) {
                list.push({x: x + 1, y: y})
            }
            if (list.length > 0) {
                let tmp = list[~~(Math.random() * list.length)]
                map[tmp.x][tmp.y] = 0
            }
        }

        function join(pos={x: 0, y: 0}) {
            join_(pos.x, pos.y)
        }

        function join_(x, y) {
            // 上
            if (y - 2 >= 0 && map[x][y - 2] == 1) {
                openlist.push({x: x, y: y-2})
                map[x][y-2] = 2
            }
            // 下
            if (y + 2 <= rows - 1 && map[x][y + 2] == 1) {
                openlist.push({x: x, y: y+2})
                map[x][y+2] = 2
            }
            // 左
            if (x - 2 >= 0 && map[x - 2][y] == 1) {
                openlist.push({x: x - 2, y: y})
                map[x - 2][y] = 2
            }
            // 右
            if (x + 2 <= cols - 1 && map[x + 2][y] == 1) {
                openlist.push({x: x + 2, y: y})
                map[x + 2][y] = 2
            }
        }

    </script>
</body>

</html>